
<div class="wrapper wrapper-content page-heading animated fadeInRight">
    <div class="row">
        <div class="col-lg-9">
            <div class="tabs-container">
                <ul class="nav nav-tabs" id="tab-list-2">
                    <li class="links active" id="search-link"><a href="#search" role="tab" data-toggle="tab">Report</a></li>
                </ul>
                <div class="tab-content">
                   <div id="search" class="tab-pane active">
                        <div class="panel-body">
                            <div class="ibox-title" style="border: none;">
                              <h5 style="color: #00afef"><i>Collection Details</i></h5>
                            </div>
                           <div class="ibox-content">
                           <div class="table-responsive">
                           <form id="search_role_form">
                           <div class="form-group">
                                <label class="col-lg-3 control-label">Receipt Number From</label>
                                <div class="col-lg-7 input-daterange input-group">
                                    <input type="text" class="form-control" name="range1">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="form-control" name="range2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-lg-3 control-label">Reference Number From</label>
                                <div class="col-lg-7 input-daterange input-group">
                                    <input type="text" class="form-control" name="ref1">
                                    <span class="input-group-addon">to</span>
                                    <input type="text" class="form-control" name="ref2">
                                </div>
                            </div>
                            <div class="form-group" id="data_5">
                                <label class="col-lg-3 control-label">Payment Date From</label>
                                <div class="col-lg-7 input-daterange input-group" id="datepicker">
                                    <input type="search" class="form-control" name="date_1" value="">
                                    <span class="input-group-addon">to</span>
                                    <input type="search" class="form-control" name="date_2" value="">
                                </div>
                            </div>
                           </form>
                           </div>
                          <center><button class="btn btn-primary btn-outline btn-md m-t-n-xs" id="get-status" type="button"><i class="fa fa-check fa-fw"></i> Get Status</button></p></center>
                           </div><!-- END OF IBOX CONTENT -->
                           <div id="result" style="display: none;">
                              <div class="ibox-content">
                                <div class="row">
                                    <div class="col-xs-9">
                                    <div class="btn-group">
                                      <a id="to_pdf" href="#" class="btn btn-link" ><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                      <a id="to_excel" href="#" class="btn btn-link" ><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                      <button id="to_mail" class="btn btn-link" ><i class="fa fa-envelope-o fa-fw"></i> <small>Send to Email</small></button>
                                  </div>
                                      <div class="col-xs-3">
                                        <a id="to_pdf" class="btn btn-w-m btn-outline btn-link" href="#"><i class="fa fa-file-pdf-o fa-fw"></i> <small>Export as PDF</small></a>
                                      </div>
                                      <div class="col-xs-3">
                                        <a id="to_excel" class="btn btn-w-m btn-outline btn-link" href='#'><i class="fa fa-file-excel-o fa-fw"></i> <small>Export as Excel</small></a>
                                      </div>
                                      <div class="col-xs-3">
                                        <div class="">
                                            <button class="btn btn-w-m btn-outline btn-link dropdown-toggle" id="to_mail"><i class="fa fa-envelope-o fa-fw"></i> <small>Send to Email</small></button>
                                        </div>
                                      </div>
                                    </div>
                                </div>
                             </div><!-- END OF IBOX CONTENT -->
                             <br>
                             <p id="search_values"></p>
                             <div class="table-responsive">
                              <table data-filter="#filter" class="footable table table-bordered table-striped table-hover" data-limit-navigation="5" data-page-size="50" data-filter-timeout="10000">
                                <thead>
                                  <tr>
                                    <th data-sort-ignore="true" >Date</th>
                                    <th data-type="numeric">Receipt Number</th>
                                    <th data-type="alpha">Account Name</th>
                                    <th data-type="alpha">Status</th>
                                    <th data-type="numeric">Year</th>
                                    <th data-type="numeric">Bill Details</th>
                                    <th data-type="alpha">Reference</th>
                                  </tr>
                                </thead>
                                <tbody id="result-table">
                                  <tr>
                                  </tr>
                                </tbody>
                                <tfoot >
                                    <tr>
                                    <td colspan="2" style='border: none !important;'><input class="form-control" placeholder="Search for. . ." type="text" id="filter"></td>
                                        <td colspan="6" style='border: none !important;'>
                                            <ul class="pagination pull-right"></ul>
                                        </td>
                                    </tr>
                                </tfoot>
                              </table>
                              </div>
                           </div>
                           <div class="ibox-content" id="email_html" style="display: none;">
                                  <form class="form-horizontal" id="email_form">
                                      <div class="form-group"><label class="col-sm-2 control-label">From:</label>
                                          <div class="col-sm-10"><input name="email_from" type="text" class="form-control" value="no-reply@ums.com"></div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label">To:</label>
                                          <div class="col-sm-10">
                                              <input name="email_to" type="text" class="form-control" value="">
                                            <!-- <div class="input-group">
                                              <input name="email_to" type="text" class="form-control" value="">
                                              <span class="input-group-btn"><button style="padding: 4px 12px; border-radius: none;" type="button" class="btn btn-white"><i class="fa fa-group fa-fw"></i></button></span>
                                            </div> -->
                                          </div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label">Subject:</label>
                                          <div class="col-sm-10"><input name="email_subj" type="text" class="form-control" value=""></div>
                                      </div>
                                       <div class="form-group"><label class="col-sm-2 control-label">File Name:</label>
                                          <div class="col-sm-10"><input name="email_filename" type="text" class="form-control" value=""></div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label">File Type:</label>
                                         <div class="col-sm-10"><label class="checkbox-inline">
                                          <input type="checkbox" name="email_topdf" value="pdf" checked> PDF (.pdf) </label> <label class="checkbox-inline">
                                          <input type="checkbox" name="email_toexcel" value="excel" > EXCEL (.xls) </label>
                                          <input style="border: none; width:0px" readonly type="text" name="email_error" value="">
                                        </div>
                                      </div>
                                       <div class="form-group"><label class="col-sm-2 control-label">Message:</label>
                                          <div class="col-sm-10">
                                            <div id="summernote"></div>
                                          </div>
                                      </div>
                                      <div class="form-group"><label class="col-sm-2 control-label"></label>
                                         <div class="col-sm-10">
                                           <button type="button" class="btn btn-white btn-md m-t-n-xs pull-right" id="email_cancel">Close</button>
                                           <button type="button" class="btn btn-success btn-md m-t-n-xs pull-right btn-margin-right" id="email_send">Send</button>
                                        </div>
                                      </div>
                                  </form>
                              </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div><!-- END of class row-->
</div>
<script>
      $(document).ready(function(){
        //$("select").chosen({width: "20%"});
        $('#data_5 .input-daterange').datepicker({
            keyboardNavigation: false,
            forceParse: false,
            autoclose: true,
            todayBtn: "linked",
            clearBtn: true,
            todayHighlight: true,
            format: "yyyy-mm-dd"
        });
        $(function(){
            $('#scroll').slimScroll({
              height: '250px'
            });
        });
      $('.email_type').click(function(){
        sessionStorage.type = $(this).attr('id');
        console.log(sessionStorage.type);
      });
      $()
        // $('.footable').footable();
       $('#summernote').summernote({
          disableDragAndDrop: true,
          shortcuts: false,
          height: 200,
          placeholder: 'write here...',
          toolbar: [
            ['para', ['ul', 'ol']]
          ]
        });

       $('#to_mail').click(function(){
           $('#result').slideUp();
           $('#email_html').show();
           $('input[name=email_filename]').val('Collection_Details_Report');
           window.open("<?php echo base_url($this->session->userdata('forajax')); ?>/mail_window","Send Email", "height=500,width=500");
       });
       $('#email_cancel').click(function(){
          $('#email_html').hide();
          $('#result').slideDown();
       });

        $('#email_send').click(function(){
          if($("#email_form").valid() == true && fileType() == true){
            $.ajax({
              url: "<?php echo base_url($this->session->userdata('forajax')); ?>/send_mail",
              type: 'POST',
              dataType: 'json',
              data: $('#email_form').serialize()+'&'+$.param({ 'email_message': $('#summernote').code(), 'range1' : sessionStorage.range1, 'range2': sessionStorage.range2,'date_1' : sessionStorage.date_1, 'date_2' :sessionStorage.date_2 }),
              success: function(data){
                if(data.msg == 'success'){
                  notifymsg('success','Email Send');
                  $('#email_html').hide();
                  $('#result').slideDown();
                }else{
                  notifymsg('danger','Error Sending Mail');
                }
                $('#email_send').html('Send');
                $('#email_send').removeAttr('disabled');
              },
              beforeSend: function(){
                $('#email_send').html('Sending Mail..');
                $('#email_send').attr('disabled',true);
              }
            });
          }
        });
        $('#search_role_form').keydown(function (e) {
          if (e.which == 13) {
            $('#get-status').trigger('click');
            return false;
          }
        });
        localStorage.table = '0';
        $('#get-status').click(function(){
          $('#email_html').hide();
          $('#email_form')[0].reset();
          $('#search_values').html('Receipt Number From <strong>' + $('input[name=range_1]').val() + '</strong> to <strong>' + $('input[name=range_2]').val() + '</strong></br>Payment Date From <strong>' + $('input[name=date_1]').val() + '</strong> to <strong>' + $('input[name=date_2]').val() + '</strong>');
          $.ajax({
            url: "<?php echo base_url($this->session->userdata('forajax')); ?>/get_status",
            type: 'POST',
            dataType: 'json',
            data: $('#search_role_form').serialize(),
            success: function(data){
               $('#get-status').removeAttr('disabled');
              var tmp = "";
              console.log(data.length);
              if(data.length == 0){
                 $('#result-table').html('<tr><td colspan="7" align="center">No Result</td></tr>');
                 $('#to_excel').hide();
                 $('#to_pdf').hide();
                 $('#to_mail').hide();
              }else{
                $.each(data,function(i,item){
                tmp += '<tr><td>'+ data[i].receipt_date +'</td><td align="right">'+ data[i].receipt_number +'</td><td>'+ data[i].acct_name +'</td><td>'+ data[i].status +'</td><td align="right">'+ data[i].year +'</td><td align="right">'+ parseFloat(data[i].pay_amount).toFixed(2) +'</td><td>'+ data[i].reference +'</td></tr>'
                });
                //$('#result-table').html(tmp); 
                $('#result-table').html(tmp).trigger('footable_redraw');
                localStorage.table = '1';
                var link = 'range1='+$('input[name=range_1]').val()+'&range2='+$('input[name=range_2]').val()+'&date_1='+$('input[name=date_1]').val()+'&date_2='+$('input[name=date_2]').val()+'&ref_1='+$('input[name=ref1]').val()+'&ref_2='+$('input[name=ref2]').val();
                $('#to_excel').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_excel?'+link);
                $('#to_pdf').attr('href','<?php echo base_url($this->session->userdata("forajax")); ?>/gen_pdf?'+link);
                $('#to_excel').show();
                $('#to_pdf').show();
                $('#to_mail').hide();
                sessionStorage.range1 = $('input[name=range_1]').val();
                sessionStorage.range2 = $('input[name=range_2]').val();
                sessionStorage.date_1 = $('input[name=date_1]').val();
                sessionStorage.date_2 = $('input[name=date_2]').val();
              }
              $('#result').show();
            },
            beforeSend: function(){
              $('#get-status').attr('disabled',true);
              $('#get-status').html('Processing Report . . .');
              $('#result').hide();
            },
            complete: function(){
               $('#get-status').html('<i class="fa fa-check fa-fw"></i> Get Status');
               $('#get-status').removeAttr('disabled');
               $('#result').show();
            }
          });
        });
        
      function fileType(){
        if($("input[name=email_toexcel").prop('checked') == false && $("input[name=email_topdf").prop('checked') == false){
          var validator = $( "#email_form" ).validate();
          validator.showErrors({
            "email_error": "Please select atleast 1 filetype."
          });
          return false;
        }else{
          return true;
        }
      }

      $("#email_form").validate({
           rules: {
               email_to: {
                  required: true,
                  email: true
               },
               email_subj: {
                  required: true
               },
               email_from: {
                  required: true
               },
               email_filename: {
                required: true
               }
           }
      });
      });
</script>